
<template>
  <div class="main">
    <div class="header wow animate__bounceInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
      <div class="title">宠物防丢卡</div>
      <img src="../assets/pet/logo.jpeg" class="logo">

    </div>
    <div class="swiper wow bounceInDown">
      <el-carousel :interval="2000" height="850px">
        <el-carousel-item >
          <img class="cover" src="../assets/pet/jj.jpeg" >
        </el-carousel-item>
        <el-carousel-item >
          <img class="cover" src="../assets/pet/keji.jpg" >
        </el-carousel-item>
        <el-carousel-item >
          <img class="cover" src="../assets/pet/yb.jpg" >
        </el-carousel-item>
        <el-carousel-item >
          <img class="cover" src="../assets/pet/smy.jpeg" >
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="middle_title wow swing">
      <span class="text">
        宠物
      </span>
    </div>

    <div class="middle">
          <div class="left wow bounceInLeft" >
            小宠物，大魅力！它们以独特的方式，深深地扎根在我们的生活中，成为我们不可或缺的一部分。它们不仅仅是毛茸茸的小家伙，更是我们生活中的小伙伴，陪伴我们度过每一个开心与不开心的时刻。

            与宠物相伴，生活充满了乐趣和惊喜。每当我们回家，看到它们摇着尾巴、眨巴着眼睛，用尽全力来表达对我们的喜爱和期待，我们的心瞬间被融化。它们的每一个小动作、每一个小表情，都充满了无尽的可爱和魅力，让我们忍不住想要去呵护它们、陪伴它们。

            宠物们的世界简单而纯粹，它们不会说谎，不会隐藏自己的情感。它们的喜怒哀乐都写在脸上，让我们能够更真实地感受到它们的情感世界。与宠物相处，让我们学会了如何去爱、如何去承担责任。它们教会我们，无论生活多么艰难，都要保持一颗善良和纯真的心。

            宠物们也是我们生活中的小老师。它们教会我们如何去关心他人、如何去体谅他人。在照顾宠物的过程中，我们学会了耐心和细心，学会了如何去付出而不求回报。这些品质不仅仅在与宠物的相处中得到了体现，更在我们的日常生活中得到了应用。

            所以，小宠物不仅仅是我们生活中的一部分，更是我们生活中的小伙伴、小老师。它们用自己的方式，为我们带来了无尽的欢乐和温暖。让我们珍惜与宠物相处的每一刻，用心去感受那份无价的陪伴和爱吧！
          </div>
          <div class="right wow bounceInRight" >
            <img class="right-img" src="../assets/pet/jimao.jpeg">
          </div>
    </div>

    <div class="middle_title  wow animate__fadeInDown">
      <span class="text">
        小贴士
      </span>
    </div>

    <div class="t-box">
      <div class="litter-box wow slideInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s">
        <img src="../assets/pet/xiumao.jpeg" class="tip-img">
        <div class="tip">
          爱护宠物，从日常细节开始。选择适合宠物的优质食物，确保它们营养均衡、健康成长。定期带宠物进行体检和疫苗接种，预防疾病的发生。每天定时带宠物外出运动，帮助它们保持体形和活力。同时，不要忽略口腔健康问题，每周给宠物刷牙或让宠物使用专门的口腔清洁产品。此外，给予宠物足够的关爱和陪伴，让它们感受到家的温暖。记住，养宠物是一份责任和担当，请用心照顾它们，让宠物在你的陪伴下快乐成长。这些小贴士，希望能帮助每位宠物主人更好地照顾自己的小伙伴。
        </div>
      </div>
      <div class="litter-box wow animate__bounceInDown" data-wow-duration="0.5s" data-wow-delay="0.5s">
        <img src="../assets/pet/shetou.jpeg" class="tip-img">
        <div class="tip">
          护宠有道，温馨相伴。选择适合宠物的饮食，确保营养均衡、健康成长；定期清洁宠物居住环境，营造卫生舒适的生活空间；每天抽出时间陪伴宠物玩耍，增进感情、满足运动需求；使用专用洗护用品为宠物梳洗，保持干净卫生、毛发光亮；外出时牵好绳，确保宠物安全，避免意外发生；定期带宠物体检，及时预防和治疗疾病。宠物是家庭的一份子，需要我们用心呵护，让它们在爱与关怀中快乐成长。爱护宠物，从我做起，用实际行动守护它们的健康和幸福。
        </div>
      </div>
      <div class="litter-box wow slideInRight" data-wow-duration="0.5s" data-wow-delay="0.5s">
        <img src="../assets/pet/d.jpeg" class="tip-img">
        <div class="tip">
          选择专为宠物设计的食物，避免人类食品的随意投喂，以确保营养均衡。宠物的窝和餐具要定期清洁消毒，以减少病菌滋生。每天记得带宠物出门活动，让它们享受阳光，舒展筋骨。别忽视宠物的卫生，适时为它们梳毛、洗澡，让它们保持干净清爽。遛宠时，请使用牵引绳，保障宠物和他人的安全。若宠物出现不适，应及时就医，切勿拖延。记住，成为宠物主人，不仅意味着收获陪伴和快乐，更意味着承担起照顾生命的重任。愿我们的关爱和细心，能为宠物创造一个温馨、健康的家。
        </div>
      </div>
    </div>

    <div class="b-box">
      <!-- 宣传栏 -->
      <div class="billboards">
        <img data-wow-duration="0.5" data-wow-delay="0.5s" class="wow bounceInLeft" src="../assets/pet/lian.jpeg"  alt="" />
        <div class="mask"></div>
        <div class="world">
          <p class="p1 wow lightSpeedIn" data-wow-duration="2s" data-wow-delay="1s">吾爱吾宠</p>
          <p class="p2 wow animate__bounceInLeft" data-wow-duration="2s" data-wow-delay="2s">待在它身边</p>
          <p class="p3 wow animate__bounceInUp" data-wow-duration="2s" data-wow-delay="2s">
            世界就变得美好而温柔了
          </p>
        </div>
      </div>
    </div>

    <div class="footer wow animate__bounceInLeft" data-wow-duration="2s" data-wow-delay="1s">宠物防丢卡</div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from 'vue'
import WOW from 'wow.js'

onMounted(() => {
  nextTick(() => {
    let wow = new WOW({
      boxClass: 'wow',///动画元件css类（默认为wow）
      animateClass: 'animated',//动画css类（默认为animated）
      offset: 0,//到元素距离触发动画（当默认为0）
      mobile: true, //在移动设备上触发动画（默认为true）
      live: true//对异步加载的内容进行操作（默认为true）
    })
    wow.init()
  })

})


</script>

<style scoped >
.cover {
  height: 850px;
  width: 100%;
}

.header {
  margin: 3px 0 7px 0;
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}

.title {
  color: #000;
  font-size: 20px;
  padding-left: 20px;
  font-weight: 700;
}

.middle_title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 0 0;

}
.text {
  width:200px;
  height:50px;
  line-height:50px;
  text-align:center;
  position:relative;
  font-size: 30px;
}


.text::after, .text::before{
  position: absolute;
  width:50px;
  height:1px;
  background:#000;
  content:'';
  top:25px;
}



.text::after{
  left:0;
}


.text::before{
  right:0;
}


.middle {
  display: flex;
  justify-content: space-between;
  padding: 50px;
  background: #f4f4f4;
}

.left {
  border-top: 3px solid #bf6639;
  padding: 30px;
  line-height: 32px;
  text-indent: 2em;
}

.left , .right {
  width: 45%;
  height: 45%;
}

.right-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.t-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  background: #f4f4f4;
}

.litter-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.tip-img {
  border-radius: 10px 10px 0 0;
}

.tip {
  padding: 10px;
  line-height: 30px;
  background: aliceblue;
  text-indent: 2em;
  height: 300px !important;
}

.tip-img, .tip {
  width: 100%;
  height: 430px;
}

.footer {
  width: 100%;
  height: 100px;
  background: #575c62;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  color: #fff;
  font-weight: 900}
</style>
